<template>
  <div>
    <h3>params: {{ $route.params }} -- {{ id }}</h3>
    <h3>query: {{ $route.query }}</h3>
    <h3>props: {{ state }} -- {{ title }}</h3>
    <hr />
    <router-link to="/news/1">111</router-link><br />
    <router-link to="/news/2">222</router-link><br />
    <router-link to="/news/3">333</router-link>
  </div>
</template>

<script>
export default {
  props: ['state', 'title', 'id'],

  // 当路由访问到此组件时，解决此钩子函数
  beforeRouteEnter(to, from, next) {
    console.log('组件 --- beforeRouteEnter')
    next()
  },

  // 离开当前路由组件
  beforeRouteLeave(to, from, next) {
    console.log('组件 --- beforeRouteLeave')
    next()
  },

  // 路由参数的改变，触发路由组件守卫
  beforeRouteUpdate(to,from,next){
    console.log(this);
    console.log('组件 --- beforeRouteUpdate');
    next()
  },

  watch:{
    '$route'(n){
      console.log('watch --- ' ,n);
    }
  },


  beforeCreate() {
    console.log('组件 === beforeCreate')
  },

  beforeDestroy() {
    console.log('组件 === beforeDestroy')
  },
  destroyed() {
    console.log('组件 === destroyed')
  },

  mounted() {
    // 获取动态路由参数数据
    console.log(this.$route.params)
    // 获取query字符串
    console.log(this.$route.query)
    // 获取路由的props方法隐式传递过来的数据
    console.log(this.state)

    // js-cookie库
    // window.document.cookie=`name=aa;expire=111111;path`
    // console.log(document.cookie);
    // sessionStorage.setItem/getItem
    // localStorage.setItem/getItem
  }
}
</script>

<style lang="scss" scoped></style>
